<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li{list-style-type: none}
    </style>
</head>
<body>
    <div id="app">
        <h1>The Goods Page</h1>
        <form>
            <ul>
                <li>name</li>
                <li><input v-model="name"></li>
                <li>remark</li>
                <li><textarea v-model="remark" rows="3" cols="50"></textarea></li>
                <li><input type="button" @click="doSaveOrUpdate" value="Save Goods"/></li>
            </ul>
        </form>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>remark</th>
                    <th>createdTime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="g in goods">
                    <td>{{g.id}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.remark}}</td>
                    <td>{{g.createdTime}}</td>
                    <td><a @click="doDeleteById(g.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm=new Vue({//vue对象时vue.js应用的入口对象
            el:"#app",//vue对象要监控的区域(底层会对这块区域的内容构建一个虚拟的dom树)
            data:{//此对象用于同步页面数据的一个对象
                name: "",
                remark: "",
                goods:{}
            },
            methods:{//同步与页面元素事件处理函数

                doSaveOrUpdate:function (){
                  let url=this.id?"goods/doUpdateGoods":"goods/doSaveGoods";
                  let params={id:this.id,name:this.name,remark:this.remark};
                  console.log(params);
                  axios.post(url,params).then(function (result){
                        alert(result.data);
                        this.vm.doFindGoods();
                        this.vm.id="";
                        this.vm.name="";
                        this.vm.remark="";
                  })
                },

                doDeleteById:function (id){
                    let url="goods/doDeleteById/"+id;
                    axios.get(url).then(function (result){
                        alert(result.data);
                        this.vm.doFindGoods();
                    })
                },

                doFindGoods:function (){
                    let url="goods/doFindGoods";
                    axios.get().then((result)=>{
                        console.log(result.data);
                        //this.vm.goods=result.data;
                        this.goods=result.data;
                    })
                }
            },
            mounted:function (){
                this.doFindGoods();//页面加载完成以后执行这个查询
            }

        })
    </script>

</body>
</html>